import classnames from 'classnames';

import Icon from '@/components/Icon';
import styles from './index.module.scss';
import { useAppSelector } from '@/store/hooks';
import { useInitialState } from '@/utils/use-initial-state';
import { getrestChannel } from '@/store/slices/home';
import { useState } from 'react';
type Props = {
  onclose: () => void;
};
const Channels = ({ onclose }: Props) => {
  const [isedit, setedit] = useState(false);
  const onChangeEdit = () => {
    setedit(!isedit);
  };
  const { userChannel } = useAppSelector((state) => state.home);
  const { restChannel } = useInitialState(getrestChannel, 'home');
  return (
    <div className={styles.root}>
      <div className="channel-header">
        <Icon type="iconbtn_channel_close" onClick={onclose} />
      </div>
      <div className="channel-content">
        {/* 编辑时，添加类名 edit */}
        <div className={classnames('channel-item', isedit && 'edit')}>
          <div className="channel-item-header">
            <span className="channel-item-title">我的频道</span>
            <span className="channel-item-title-extra">点击进入频道</span>
            <span className="channel-item-edit" onClick={onChangeEdit}>
              {isedit ? '保存' : '编辑'}
            </span>
          </div>
          <div className="channel-list">
            {/* 选中时，添加类名 selected */}
            {userChannel.map((item) => {
              return (
                <span className={classnames('channel-list-item')} key={item.id}>
                  {item.name}
                  <Icon type="iconbtn_tag_close" />
                </span>
              );
            })}
          </div>
        </div>

        <div className="channel-item">
          <div className="channel-item-header">
            <span className="channel-item-title">频道推荐</span>
            <span className="channel-item-title-extra">点击添加频道</span>
          </div>
          <div className="channel-list">
            {restChannel.map((item) => {
              return (
                <span className="channel-list-item" key={item.id}>
                  {item.name}
                </span>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
};

export default Channels;
